<template>
  <div class="boss">
    <head-page :title="`${this.$route.query.num}.${this.$route.query.title}`"
    style="border-bottom: 2px solid #dad9df;"
    ></head-page>
    <div class="title">
{{ list.title }}
    </div>
   <div class="bottom">
     <!-- 版心区域 -->
     <div class="center">
      <div class="xi">
							<div class="yuan">
							{{ this.$route.query.index }}
							</div>
							<div class="zhong">
							{{this.$route.query.Text}}
							</div>
						</div>
            <!-- 内容区域 -->
            <div class="context richText" v-html="list.text">

            </div>
</div>
   </div>
  </div>
</template>

<script>
import {sharegetDetails} from "@/api/index"
export default {
  data(){
    return{
      list:{
        title:"",
        text:""
      },
    }
  },
  mounted(){
    sharegetDetails({
      Id:this.$route.query.id,
    }).then(res=>{
       if(res.data.code==200){
       this.list.title=res.data.data.title
       this.list.text=this.dataHTML(res.data.data.content)
        // this.dataHTML(this.list.content)
      }
    })
  }
}
</script>

<style scoped>
.boss{
    width: 100%;
    height: 6rem;
}
.title{
  width: 100%;
  height: .3rem;
text-indent: .05rem;
  line-height: .3rem;
  font-weight: 700;
  background-color: white;
}
.bottom{
  width: 100%;
  height: 100%;
  display: flex;
justify-content: center;
  background-color: #dad9df;
}
.center{
    width: 98%;
    height: 100%;
 
}
.xi {
	width: 100%;
	margin-top: 0.05rem;
	display: flex;

}
.xi .yuan {
	width: 0.16rem;
	height: 0.16rem;
	margin-left: 0.1rem;
	font-weight: 700;
	text-align: center;
	line-height: 0.16rem;
	border-radius: 50%;
	margin-top: 0.05rem;
	border: 1px solid black;
}

/* 中间区域 */
.zhong {
	width: 95%;
	height: 100%;
	line-height: 0.3rem;
	padding-left: 5px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.context{
  width: 100%;
  height: 1rem;
  margin-top: .1rem;
text-indent: .2rem;
}
</style>